<template>
  <div class="select-master">
    <p class="please">建议您听取多位大师意见</p>
    <ul class="masters">
      <li class="item" :class="{default: item.systemMaster}" v-for="(item, index) in masters" :key="'master' + index">
        <figure class="avatar" v-if="item.systemMaster">
          <img src="@/assets/question/default_master.png">
        </figure>
        <figure class="avatar" v-else :style="{backgroundImage: 'url('+ hasdomain(item.userPhoto) +')'}">
          <img v-if="false" :src="item.userPhoto | hasdomain">
        </figure>
        <div class="infor">
          <h6 class="title">
            <span class="name">{{item.systemMaster ? '系统匹配大师' : item.name}}</span>
            <span class="price">￥{{item.price | float2}}</span>
          </h6>
          <p v-if="!item.systemMaster" class="intro" v-html="item.content"></p>
          <div class="select vux-1px-t" @click="selectMaster(item.masterId, item.price)">
            <span>{{item.orderamount || 0}}名用户已选择</span>
            <icon :type="selectedMaster.indexOf(item.masterId) > -1 ? 'success' : 'circle'"></icon>
          </div>
        </div>
      </li>
    </ul>
    <footer class="footer">
      <div class="btn-ask" :class="{selected: isSelected}" @click="askQuestion()">
        <span>提问（￥{{allPrice | float2}}）</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: this.$route.query.cid,
      fqId: this.$route.query.fqId,
      fqtext: this.$route.query.fqtext,

      selectedMaster: [],
      masters: [],
      allPrice: 0,
      offset: 0,
      limit: 10,
      isMore: false,
    };
  },
  computed: {
    uid() {
      return this.$store.state.userId;
    },
    isSelected() {
      return this.selectedMaster.length > 0;
    }
  },
  filters: {
    float2(value) {
      var v = Number(value);
      if (v) {
        return v.toFixed(2);
      } else {
        return "0.00";
      }
    }
  },
  created() {
    this.getMasterlist();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollLoad);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollLoad);
  },
  methods: {
    getMasterlist() {
      this.$http.fetchGet("getFqMasterList", {
        fqcat_id: this.cid,
        question: this.fqId ? this.fqId : this.fqtext,
        offset: this.offset,
        limit: this.limit,
      }).then(({ data = [] }) => {
        console.log('选择大师', data);
        this.masters.push(...data);
				if(data.length == 0) {
          this.offset -= this.limit;
          this.isMore = true;
        } else {
          this.isMore = false;
        }
      }, err => {
        this.offset -= this.limit;
      });
    },
    scrollLoad() {
      var scrollTop = document.documentElement.scrollTop;
      var clientHeight = document.documentElement.clientHeight;
      var scrollHeight = document.documentElement.scrollHeight;
      var footerHeight = this.$el.querySelector('.footer').offsetHeight;
      // console.log(scrollTop, clientHeight, scrollHeight, footerHeight);
      if (scrollTop + clientHeight >= scrollHeight - footerHeight) {
        if(this.isMore) return;
        this.isMore = true;
        this.offset += this.limit;
        this.getMasterlist();
      }
    },
    selectMaster(masterId, price) {
      var sindex = this.selectedMaster.indexOf(masterId);
      if (sindex > -1) {
        this.selectedMaster.splice(sindex, 1);
        this.allPrice -= Number(price);
      } else {
        this.selectedMaster.push(masterId);
        this.allPrice += Number(price);
      }
    },
    isLogin() {
      if (this.uid) {
        return true;
      } else {
        this.$vux.toast.text("请先登录");
        setTimeout(() => {
          this.$router.push({
            path: "/login",
            query: {
              redirect: this.$route.fullPath
            }
          });
        }, 2000);
      }
    },
    askQuestion() {
      if(!this.isSelected) return this.$vux.toast.text("请至少选择一位大师");
      if(!this.isLogin()) return;
      if(this.$store.state.isMaster) return this.$vux.toast.text("暂不支持老师下单");
      if(!this.$store.state.userPhone) return this.$store.commit('showPhone', true);
      if(!this.isMark) {
        this.$http.fetchGet("saveFqConsultance", {
          questionId: this.fqId || this.fqtext,
          userId: this.uid,
          questionType: 1,
          masterId: this.selectedMaster,
        }).then(({ data }) => {
          console.log('闪问下单', data);
          data && this.pay1(data);
        });
      }
    },
    pay1(data) {
      this.$vux.toast.text('下单成功');
      setTimeout(() => {
        this.$router.push({
          path: '/pay',
          query: {
            step: 1,
            id: data.orderId,
            from: 'qa',
          }
        });
      }, 2000);
    }
  }
};
</script>

<style scoped lang="less">
.select-master {
  background-color: @bgColor;
  padding-bottom: 1.706667rem;
  .please {
    .f26;
    .padd(32, 20);
  }
  .masters {
    .item {
      display: flex;
      margin-bottom: 0.266667rem;
      padding: 0.4rem 0.266667rem 0;
      background-color: #fff;
      &.default {
        padding-top: 0.266667rem;
        .infor{
          .title {
            height: .8rem;
            line-height: .8rem;
            margin-bottom: .2rem;
          }
        }
      }
      .avatar {
        margin-bottom: 0.266667rem;
        width: 1.666667rem;
        height: 1.666667rem;
        border-radius: 0.266667rem;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        img {
          display: block;
          width: 100%;
        }
      }
      .infor {
        flex: 1;
        padding-left: .373333rem;
        .title {
          display: flex;
          justify-content: space-between;
          height: .56rem;
          line-height: .56rem;
          font-weight: normal;
          .name {
            font-size: .4rem;
          }
          .price {
            color: #E73828;
            font-size: .346667rem;
          }
        }
        .intro {
          font-size: .32rem;
          line-height: 1.5;
          margin: .16rem 0 .24rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .select {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: .933333rem;
          line-height: .933333rem;
          span {
            color: #999;
            font-size: .32rem;
          }
          i {
            font-size: 0.426667rem;
            line-height: inherit;
            transition: all 0.4s;
          }
        }
      }
    }
  }
  .footer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.266667rem;
    background-color: #fff;
    border-top: 1px solid @bgColor;
    .btn-ask {
      text-align: center;
      height: 1.173333rem;
      line-height: 1.173333rem;
      border-radius: .066667rem;
      background-color: @primary;
      color: #fff;
      font-size: 0.4rem;
      opacity: 0.47;
      &.selected {
        opacity: 1;
      }
    }
  }
}
</style>

